<template>
  <div class="editAddress">
    <div class="main">
      <div class="li">
        <div class="left">
          <span>收货人</span>
        </div>
        <div class="right">
          <van-field v-model="form.name" clearable placeholder="请输入收货人姓名"/>
        </div>
      </div>
      <div class="li">
        <div class="left">
          <span>电话号码</span>
        </div>
        <div class="right">
          <van-field v-model="form.mobile" clearable placeholder="请输入收货人电话号码"/>
        </div>
      </div>
      <div class="li">
        <div class="left">
          <span>收货地址</span>
        </div>
        <div class="right" @click="addressShow = true;">
          <span>{{form.region_name}}</span><img src="@/assets/images/ic_right.png" alt="">
        </div>

      </div>
      <div class="li field">
        <van-field
          v-model="form.address_detail"
          type="textarea"
          placeholder="详细地址：如道路、门牌号、小区、楼栋号、单元室等"
          rows="1"
          clearable
          autosize
        />
      </div>
    </div>
    <div class="line"></div>
    <div class="main">
      <div class="li liTip">
        <div class="leftTip">
          <span>设为默认地址</span>
        </div>
        <div class="right">
          <van-switch
            v-model="checked"
            @input="onInput"
            active-color="rgb(253, 193, 44)"
          />
        </div>
      </div>
    </div>
    <div class="btn" @click="submit()" v-if="methods === 'add'"><input type="button" value="确认新增"></div>
    <div class="btn" @click="submit()" v-if="methods === 'edit'"><input type="button" value="确认修改"></div>
    <div class="del" v-if="methods === 'edit'"><span @click="delAddress"><img src="@/assets/images/ic_delete.png"
                                                                              alt="">删除地址</span></div>

    <van-actionsheet v-model="addressShow">
      <van-area :area-list="areaList" @confirm="confirm" @cancel="addressShow = false"/>
    </van-actionsheet>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/6/11 14:29.
   */
  import {Indicator} from 'mint-ui';
  import {Dialog} from 'vant';
  import utils from '@/lib/StringExtend';
  import areaList from '@/lib/addressData.js';

  export default {
    mounted() {
      this.methods = this.$route.query.methods;
      if (this.methods === 'edit') {
        this.form = this.$route.query.form;
        this.address = this.form.region_name;
        this.checked = this.form.is_default === 1 ? true : false;
      }
    },
    components: {},
    props: {},
    data() {
      return {
        wechatId: utils.getCookie('wechat_id'),
        form: {
          name: undefined,
          mobile: undefined,
          region_name: '选择省市区',
          province_code: undefined,
          city_code: undefined,
          area_code: undefined,
          address_detail: undefined,
          is_default: 1
        },
        methods: undefined,
        checked: true,
        areaList: areaList,
        addressShow: false,
      }
    },
    computed: {},
    methods: {
      confirm(value, index) {
        this.addressShow = false;
        this.form.region_name = '';
        value.forEach((item, index) => {
          this.form.region_name += item.name;
          switch (index) {
            case 0:
              this.form.province_code = item.code;
              break;
            case 1:
              this.form.city_code = item.code;
              break;
            case 2:
              this.form.area_code = item.code;
              break;
          }
        });
      },
      onInput(checked) {
        if (checked) {
          this.form.is_default = 1;
        } else {
          this.form.is_default = 0;
        }
      },
      submit() {
        let regPhone = /^1[345678]\d{9}$/;
        if (utils.isNone(this.form.name)) {
          this.$toast('请输入收货人姓名');
          return false;
        } else if (utils.isNone(this.form.mobile)) {
          this.$toast('请输入收货人电话号码');
          return false;
        } else if (!regPhone.test(this.form.mobile)) {
          this.$toast('电话号码格式有误');
          return false;
        } else if (this.form.region_name === '选择省市区') {
          this.$toast('请选择省市区');
          return false;
        } else if (utils.isNone(this.form.address_detail)) {
          this.$toast('请输入详细地址');
          return false;
        }
        if (this.methods === 'add') {
          this.addAddress();
        } else if (this.methods === 'edit') {
          this.addressEdit();
        }
      },
      /*
      * 编辑
      * */
      addressEdit() {
        let params = Object.assign(this.form, {
          open_id: utils.getCookie('open_id_' + this.wechatId),
        });
        Indicator.open('加载中...');
        this.$axios.addressEdit(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return;
          }
          this.$toast(res.errmsg);
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000)
        })
      },
      /*
      * 添加
      * */
      addAddress() {
        let params = Object.assign(this.form, {
          open_id: utils.getCookie('open_id_' + this.wechatId),
        });
        Indicator.open('加载中...');
        this.$axios.addressAdd(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return;
          }
          this.$toast(res.errmsg);
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000)
        })
      },
      /*
      * 删除
      * */
      delAddress() {
        Dialog.confirm({
          title: '提醒',
          message: '是否删除该地址？',
          confirmButtonColor: 'rgb(253, 193, 44)'
        }).then(() => {
          let params = {
            address_id: this.form.address_id,
            open_id: utils.getCookie('open_id_' + this.wechatId),
          };
          Indicator.open('加载中...');
          this.$axios.addressDelete(params).then(res => {
            Indicator.close();
            if (res.errcode !== '000') {
              this.$toast(res.errmsg);
              return;
            }
            this.$toast(res.errmsg);
            setTimeout(() => {
              this.$router.go(-1)
            }, 1000)
          })
        });
      },
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .editAddress {
    width: 100%;
    height: 100%;
    background: white;

    .van-popup {
      border-radius: 0;
    }

    .van-cell {
      font-size: 0.22rem;
      width: 5rem;
    }

    .main {
      width: 100%;
      padding-left: 0.42rem;
      box-sizing: border-box;

      .li {
        width: 100%;
        height: 0.96rem;
        border-bottom: 1px solid #F6F6F6;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;

        .left {
          display: flex;
          flex-direction: column;
          width: 1.6rem;

          span {
            font-size: 0.26rem;
            color: #333333;
          }
        }

        .right {
          height: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;

          span {
            font-size: 0.26rem;
            color: #999999;
          }

          img {
            width: 0.1rem;
            height: 0.2rem;
            margin-left: 0.21rem;
          }

          input {
            width: 5rem;
            height: 100%;
            font-size: 0.24rem;
            color: #999999;
            border: none;
          }
        }

      }

      .li:nth-child(3) {
        border-bottom: 0;
        justify-content: space-between;

        .right {
          margin-right: 0.4rem;
        }
      }

      .field {
        height: auto;
        padding: 0 0.4rem 0.4rem 0;
        box-sizing: border-box;
      }

      .liTip {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .leftTip {
          width: 2rem;
          font-size: 0.26rem;
        }

        .right {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 0.32rem;

          .van-switch, .van-switch--on {
            font-size: 22px !important;
          }
        }
      }
    }

    .btn {
      width: 6.96rem;
      height: 0.8rem;
      margin: 0 auto;
      margin-top: 2.6rem;

      input {
        font-size: 0.3rem;
        text-align: center;
        width: 6.96rem;
        height: 0.8rem;
        border: none;
        background: linear-gradient(45deg, rgba(253, 180, 5, 1), rgba(253, 204, 74, 1));
        border-radius: 0.4rem;
        color: white;
      }
    }

    .del {
      display: flex;
      justify-content: flex-start;
      color: #CECFD3;
      font-size: 0.26rem;
      margin-top: 0.36rem;
      padding-left: 0.38rem;
      box-sizing: border-box;

      span {
        display: flex;
        align-items: center;
      }

      img {
        width: 0.34rem;
        height: 0.36rem;
        margin-right: 0.1rem;
      }
    }
  }
</style>
